<template>
	<view class="page">
		<!-- 搜索条件 -->
		<view class="search-box">
			<uni-datetime-picker v-model="queryParams.dateRange" type="daterange" rangeSeparator="至"
				placeholder="选择日期范围" class="search-input" />
			<view class="form-actions">
				<button class="btn-search" @click="getList()">搜索</button>
				<button class="btn-reset" @click="reset">重置</button>
			</view>
		</view>
		<view class="rank-list">
			<view class="rank-item" v-for="(item,index) in rankList" :key="index">
				<view class="rank-num" :class="'rank-'+item.rank">{{ item.rank }}</view>
				<view class="rank-info">
					<text class="cust-name">{{ item.fCustId_FName }}</text>
					<text class="cust-code">编码：{{ item.fCustId_FNumber }}</text>
				</view>
				<view class="rank-amount">￥{{ formatAmount(item.fAmount_sum) }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		rank
	} from '../../api/saleOrder'
	export default {
		data() {
			return {
				queryParams: {
					fSalerId_FName: this.$store.state.user.name,
					dateRange: []
				},
				rankList: []
			}
		},
		onLoad() {

			this.getList()
		},
		methods: {
			getList() {
				let that = this;
				this.queryParams.params = {};
				if (that.queryParams.dateRange.length > 0) {
					that.queryParams.params["startTime"] = that.queryParams.dateRange[0];
					that.queryParams.params["endTime"] = that.queryParams.dateRange[1];
				}
				rank(that.queryParams).then(res => {
					if (res.code == 200) {
						that.rankList = res.data;
					}
				})
			},
			formatAmount(val) {
				if (!val) return '0.00'
				return Number(val).toLocaleString('zh-CN', {
					minimumFractionDigits: 2
				})
			}
		}
	}
</script>

<style>
	.search-input {
		flex: 1;
		height: 40px;
		border: 1px solid #ddd;
		border-radius: 8px;
		padding: 0 10px;
		font-size: 14px;
		background-color: #fafafa;
	}

	.form-actions {
		display: flex;
		gap: 12px;
		margin-top: 10px;
	}

	.btn-reset {
		flex: 1;
		height: 40px;
		background: #f5f5f5;
		color: #333;
		border-radius: 8px;
		border: 1px solid #ddd;
		font-size: 15px;
	}

	.btn-search {
		flex: 1;
		height: 40px;
		background: #4caf50;
		color: #fff;
		border-radius: 8px;
		border: none;
		font-size: 15px;
	}

	.page {
		padding: 20rpx;
		background: #f5f5f5;
		min-height: 100vh;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		color: #333;
		text-align: center;
	}

	.rank-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.rank-item {
		display: flex;
		align-items: center;
		background: #fff;
		padding: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.rank-num {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 50%;
		color: #fff;
		font-weight: bold;
		margin-right: 20rpx;
		background: #007AFF !important;
	}

	.rank-1 {
		background: #f56c6c !important;
	}

	.rank-2 {
		background: #e6a23c !important;
	}

	.rank-3 {
		background: #67c23a !important;
	}

	.rank-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.cust-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

	.cust-code {
		font-size: 24rpx;
		color: #999;
	}

	.rank-amount {
		font-size: 30rpx;
		font-weight: bold;
		color: #007AFF;
	}
</style>